<template>
  <div class="me">
    <topnave></topnave>
    <div class="topuser">
      <img :src="user.userDetail.profile.avatarUrl" alt />
      <div class="username">{{ user.userDetail.profile.nickname }}</div>
    </div>
    <div class="btn">
      <van-button type="danger" @click="outlogin" style="width:3rem;border-radius: 0.5rem;">退出登录</van-button>
    </div>
    <!-- <button >退出登录</button> -->
  </div>
  <user-like></user-like>
</template>
<script>
import { mapState } from 'vuex'
import userLike from '../components/userLike'
import topnave from "../components/topnav/topnav.vue";


export default {
  components: {
    userLike,
    topnave
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    console.log(this.user)
    // this.getuser()
  },
  methods: {

    outlogin () {
      this.$store.commit('setUser', {})
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.me {
  width: 100%;
  border: 0.01rem solid #fff;
  background-color: aquamarine;
  .btn {
    margin: 0.2rem;
    text-align: center;
  }
  .topuser {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
    flex-wrap: wrap;
    img {
      width: auto;
      height: 1.2rem;
      border-radius: 100%;
    }
    .username {
      width: 100%;
      text-align: center;
      margin-top: 0.3rem;
    }
  }
}
</style>